<script setup>
import { ref, computed } from 'vue'

// 请假记录数据
const leaveRecords = ref([
  { 
    date: '2024-05-10',
    leaveId: 'QJ2024051001', 
    employeeName: '糖醋',
    department: '生产部',
    leaveType: '病假',
    duration: '3天',
    status: '已批准',
    reason: '感冒发烧'
  },
  { 
    date: '2024-05-11',
    leaveId: 'QJ2024051102', 
    employeeName: '糖醋',
    department: '生产部',
    leaveType: '事假',
    duration: '1天',
    status: '待审批',
    reason: '家庭事务'
  },
  { 
    date: '2024-05-12',
    leaveId: 'QJ2024051203', 
    employeeName: '糖醋',
    department: '生产部',
    leaveType: '年假',
    duration: '5天',
    status: '已驳回',
    reason: '工作安排冲突'
  }
])

// 搜索功能
const searchText = ref('')
const showNoData = ref(false)

// 过滤后的数据
const filteredRecords = computed(() => {
  return leaveRecords.value.filter(item => 
    item.leaveId.includes(searchText.value.trim()) ||
    item.employeeName.includes(searchText.value.trim())
  )
})

// 搜索处理
const handleSearch = () => {
  showNoData.value = filteredRecords.value.length === 0
}

// 清空搜索
const handleClear = () => {
  searchText.value = ''
  showNoData.value = false
}
</script>

<template>
  <view class="info-list">
    <!-- 搜索框 -->
    <view class="info-list__search">
      <uni-search-bar 
        class="info-list__search--search-bar" 
        v-model="searchText"
        color="#999999"  
        placeholder="请输入请假单号" 
        bgColor="#FFFFFF"
        @confirm="handleSearch"
        @clear="handleClear"
        @input="handleSearch"
      ></uni-search-bar>
    </view>

    <!-- 数据列表 -->
    <view class="info-list__datalist">
      <!-- 搜索结果 -->
      <template v-if="filteredRecords.length > 0">
        <view 
          v-for="(item, index) in filteredRecords" 
          :key="index"
          class="card-item"
        >
          <uni-card 
            :title="`请假日期：${item.date}`" 
            :extra="`单号：${item.leaveId}`" 
            class="info-list__datalist--card"
          >
            <view class="info-row">
              <text class="label">姓名：</text>
              <text class="content">{{ item.employeeName }}</text>
            </view>
            
            <view class="info-row">
              <text class="label">部门：</text>
              <text class="content">{{ item.department }}</text>
            </view>

            <view class="info-row">
              <text class="label">类型/时长：</text>
              <text class="content">{{ item.leaveType }}（{{ item.duration }}）</text>
            </view>

            <view class="info-row status-row">
              <text class="label">审批状态：</text>
              <text 
                class="status-tag"
                :class="{
                  'approved': item.status === '已批准',
                  'pending': item.status === '待审批',
                  'rejected': item.status === '已驳回'
                }"
              >
                {{ item.status }}
              </text>
            </view>
          </uni-card>
        </view>
      </template>

      <!-- 无数据提示 -->
      <view v-else class="no-data" v-show="showNoData">
        <image src="/static/assets/recode/空状态.png" class="empty-img" />
        <text class="empty-text">未找到相关记录</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.info-list {
  padding: 10rpx;
  
  &__datalist {
    .card-item {
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12rpx 0;
      font-size: 28rpx;

      &.status-row {
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;
      }

      .label {
        color: #666;
        min-width: 160rpx;
      }

      .content {
        color: #333;
        flex: 1;
        text-align: right;
      }

      .status-tag {
        padding: 6rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;

        &.approved {
          background: #e8fae8;
          color: #07c160;
        }

        &.pending {
          background: #fff3e0;
          color: #ff9500;
        }

        &.rejected {
          background: #ffe5e5;
          color: #ff4444;
        }
      }
    }
    
    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 100rpx 0;
      
      .empty-img {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-text {
        color: #999;
        font-size: 28rpx;
      }
    }
  }
  
  &__datalist--card {
    :deep(.uni-card__header) {
      border-bottom: 1rpx solid #eee;
    }
  }
}
</style>